<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>layui.dtree帮助手册</title>
<link rel="stylesheet" href="../layui/css/layui.css">
<script type="text/javascript" src="../layui/layui.js"></script>

<link rel="stylesheet" href="../layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="../layui_ext/dtree/font/dtreefont.css">

<link rel="stylesheet" href="case.css">
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>

	<div class="container">
		<div class="layui-row layui-col-space10">
			<div class="layui-fluid">
				<div class="div_h3title">
					<i class="dtreefont dtree-icon-fenguangbaobiao"></i>
					<span>dtree 数据树文档 - layui.dtree</span>
				</div>
			</div>
			
			<div class="layui-fluid">
				<blockquote class="layui-elem-quote">下拉树的使用，并且支持dtree的全部属性！</blockquote>
				<blockquote class="layui-elem-quote">模块加载名称：dtree</blockquote>
				<blockquote class="layui-elem-quote">
					<ul class="layui-timeline">
						<li class="layui-timeline-item">
							<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
								<div class="layui-timeline-content layui-text">
									<h3 class="layui-timeline-title version-title"></h3>
									<ul data-vlog="vs999">
										<li>【新增】标签属性新增：ul标签上新增data-value属性，用于指定下拉树的初始展示值</li>
										<li>【新增】基础属性新增：select，设置树模式为下拉树</li>
										<li>【新增】基础属性新增：selectTips，设置下拉树时的输入框提示文字</li>
										<li>【新增】基础方法新增：renderSelect，初始化下拉树</li>
										<li>【新增】基础方法新增：setSelectValue，设置下拉树的初始展示值</li>
										<li>【新增】内置方法新增：setSelectValue，设置下拉树的初始展示值</li>
										<li>【新增】内置方法新增：selectSetting，设置下拉树的初始元素</li>
										<li>【新增】内置方法新增：renderSelectDom，渲染下拉树的Dom结构</li>
									</ul>
								</div>
							</li>
						</ul>
				</blockquote>
			</div>
			
			<div class="layui-fluid">
				<fieldset class="layui-elem-field layui-field-title" id="simpleUse">
					<legend>常规用法</legend>
					<div class="layui-field-box">
						<p>如何使用下拉树，你可以如此这般的使用它。</p>
						<div class="layui-row layui-col-space10" style="margin-top: 10px;">
							<div class="layui-col-lg12">
								<ul id="selTree1" class="dtree" data-id="0"></ul></div>
							<div class="layui-col-lg12">
								<pre class="layui-code" lay-title="JavaScript">
									dtree.renderSelect({
									  elem: "#selTree1",
									  width: "100%", // 可以在这里指定树的宽度来填满div
									  url: "../json/case/asyncTree1.json"
									});
								</pre>
							</div>
						</div>
					</div>
				</fieldset>
			</div>
			
			<div class="layui-fluid">
				<fieldset class="layui-elem-field layui-field-title" id="updateTips">
					<legend>指定显示框默认文字</legend>
					<div class="layui-field-box">
						<p>你可以改变下拉树默认的提示文字。</p>
						<div class="layui-row layui-col-space10" style="margin-top: 10px;">
							<div class="layui-col-lg12">
								<ul id="selTree2" class="dtree" data-id="0"></ul></div>
							<div class="layui-col-lg12">
								<pre class="layui-code" lay-title="JavaScript">
									dtree.renderSelect({
									  elem: "#selTree2",
									  url: "../json/case/asyncTree1.json",
									  selectTips: "我想做一个成熟的提示语"
									});
								</pre>
							</div>
						</div>
					</div>
				</fieldset>
			</div>
			
			<div class="layui-fluid">
				<fieldset class="layui-elem-field layui-field-title" id="selectValue">
					<legend>指定下拉树的默认显示值</legend>
					<div class="layui-field-box">
						<p>你可以改变下拉树的初始值。</p>
						<div class="layui-row layui-col-space10" style="margin-top: 10px;">
							<div class="layui-col-lg12">
								<ul id="selTree3" class="dtree" data-id="0"></ul></div>
							<div class="layui-col-lg12">
								<pre class="layui-code" lay-title="JavaScript">
									// 你可以在ul标签上指定data-value
									&lt;ul id="selTree3" class="dtree" data-id="0" data-value="湘潭市"&gt;&lt;/ul&gt;&lt;/div&gt;
									dtree.renderSelect({
									  elem: "#selTree3",
									  url: "../json/case/asyncTree1.json",
									  selectValue: "湘潭市", // 你可以在这里指定默认值
									  done: function(){
									    dtree.dataInit("selTree3", "001003");
									    dtree.setSelectValue("selTree3"); // 也可以在这里指定，第二个参数如果不填，则会自动读取
									  }
									});
								</pre>
							</div>
						</div>
					</div>
				</fieldset>
			</div>
			
			
			<div class="layui-fluid">
				<blockquote class="layui-elem-quote">强大啊老铁。</blockquote>
			</div>
			
		</div>
	</div>

</body>
<script type="text/javascript" src="select.js"></script>
<script type="text/javascript" src="../depend/version.js"></script>
<script type="text/javascript">
	layui.extend({
		dtree: '{/}../layui_ext/dtree/dtree'
	}).use(['element','layer', 'table', 'code' ,'util', 'dtree'], function(){
		var element = layui.element,
			layer = layui.layer,
			table = layui.table,
			util = layui.util,
			dtree = layui.dtree,
			$ = layui.$;
		
		layui.code();	// 代码修饰器
		util.fixbar();	// 置顶按钮
		
		if(document.location.protocol != "http:" && document.location.protocol != "https:") {
		    layer.msg("如需要使用异步加载，则需要将项目发布到服务器",{icon:7});
		}
		
		// 右侧弹出层
		layer.open({
			type: 1,
			title: "目录",
			content: '<ul id="menuTree" class="dtree" data-id="menuTree" style="width:159px;"></ul>',
			area:["180px", "500px"],
			offset:["50px","85%"],
			resize: false,
			shade: 0,
			success: function(layero, index){
				var DTree = dtree.render({
					elem: "#menuTree",
					data: menuTree,
					type: "all",
					icon: "-1",
					initLevel: "3",
					formatter: {
						title: function(data){
							var tt = data.title;
							var tts = ["常规用法","指定显示框默认文字","下拉树的默认显示值"];
							for(var i=0; i<tts.length; i++) {
								if(tt == tts[i]) {
									tt += "&nbsp;<span class='layui-badge-dot'></span>";
								}
							}
							return tt;
						}
					}
				});
				
				dtree.on("node('menuTree')", function(obj){
					var nodeId = obj.param.nodeId;
					$("html, body").animate({ scrollTop: $("#"+nodeId).offset().top-50 }, {duration: 500,easing: "swing"});
				});
			}
		});
		
		// 1.selTree1
		dtree.renderSelect({
			elem: "#selTree1",
			width: "100%",
			url: "../json/case/commonTree3.json",
			toolbar: true,
			menubar: true,
			checkbar: true
		});
		
		dtree.renderSelect({
		  elem: "#selTree2",
		  url: "../json/case/asyncTree1.json",
		  selectTips: "我想做一个成熟的提示语"
		});
		
		dtree.renderSelect({
		  elem: "#selTree3",
		  url: "../json/case/asyncTree1.json",
		  selectValue: "湘潭市", // 你可以在这里指定默认值
		  done: function(){
		    dtree.dataInit("selTree3", "001003");
		    dtree.setSelectValue("selTree3"); // 也可以在这里指定，第二个参数如果不填，则会自动读取
		  }
		});
	});
</script>
</html>